<template>
    <span @click.stop="onBoxClick" >
        <input ref="file" type="file" style="display: none;"
               :accept="format"
            @change="onSubmit">
        <slot/>
    </span>
</template>

<script>
    export default {
        name: "N9Upload",
        data() {
            return {
                submitting: false
            }
        },
        props: {
            disabled: Boolean,
            url: {
                type: String,
                default: ''
            },
            tokenUrl: {
                type: String,
                default: ''
            },
            format: {
                type: String,
                default: '.jpg,.gif'
            },
            maxSize: {
                type: Number,
                default: 2048
            },
            destType: {
                type: String,
                default: ''
            },
            params: Object,
            errorMessage: {
                type: String,
                default: '上传失败'
            }
        },
        methods: {
            uploadQiniu(file, filename) {
                ajax.get(this.tokenUrl, res => {
                    var formData = new FormData();
                    formData.append("file", file, filename); //加入文件对象
                    formData.append('token', res.data.token);
                    ajax.upload(this.url, formData, res => {
                        this.$emit('success', res.data);
                        this.uploadComplete();
                    }, (res) => {
                        this.n9.error(res && res.msg || this.errorMessage);
                        this.$emit('error', res);
                        this.uploadComplete();
                        return true;
                    }, {withCredentials: false});
                })
            },
            uploadOwner(file, filename) {
                var formData = new FormData();
                formData.append("file", file, filename); //加入文件对象
                if (this.params) {
                    for (var key in this.params) {
                        formData.append(key, this.params[key]);
                    }
                }
                ajax.upload(this.url, formData, res => {
                    this.$emit('success', res.data);
                    this.uploadComplete();
                }, (res) => {
                    this.n9.error(res && res.msg || this.errorMessage);
                    this.$emit('error', res);
                    this.uploadComplete();
                    return true;
                });
            },
            uploadComplete() {
                this.$emit('end');
                this.submitting = false;
            },
            onBoxClick() {
                if (this.disabled || this.submitting) {
                    return;
                }
                this.$refs.file.click();
            },
            onSubmit(e) {
                var file = e.target.files[0];
                e.target.value = null;
                var filename = file.name;
                var dotPos = filename.lastIndexOf("\.");
                if (dotPos == -1) {
                    this.n9.error('文件格式有误')
                    return false;
                }
                var extName = filename.substring(dotPos).toLowerCase();
                if (this.format) {
                    var acceptArray = this.format.split(",");
                    if (acceptArray.indexOf(extName) == -1) {
                        this.n9.error("仅支持：" + acceptArray);
                        return false;
                    }
                }
                if (file.size > (this.maxSize * 1024)) {
                    this.n9.error('文件大小不能超过' + this.maxSize + "k")
                }

                this.submitting = true;
                this.$emit('start');
                switch (this.destType) {
                    case 'qiniu':
                        this.uploadQiniu(file, filename);
                        break;
                    default:
                        this.uploadOwner(file, filename);
                }
            }
        }
    }
</script>

<style scoped>

</style>